<template>
  <div class="markdown">
    <h1>图表</h1>
    <a-tabs default-active-key="1" :animated="false">
        <a-tab-pane key="1" tab="地图">
            <a-row :gutter="20">
                <a-col :span="12">
                    <MdPreview :val="demo1" :show="false" desName="地图一">
                        <template slot="code">
                            <EchartMapA height="600px" />
                        </template>
                        <template slot="des">
                            <p><span>china.js下载：</span></p>
                            <ul>
                                <li><a :href="`${baseUrl}/static/chart/china.js`" download="china.js">china.js</a></li>
                            </ul>
                        </template>
                    </MdPreview>
                    <MdPreview :val="demo1" :show="false" desName="地图三">
                        <template slot="code">
                            <EchartMapC height="600px" />
                        </template>
                        <template slot="des">
                            <p><span>china.js下载：</span></p>
                            <ul>
                                <li><a :href="`${baseUrl}/static/chart/china.js`" download="china.js">china.js</a></li>
                            </ul>
                        </template>
                    </MdPreview>
                </a-col>
                <a-col :span="12">
                    <MdPreview :val="demo1" :show="false" desName="地图二">
                        <template slot="code">
                            <EchartMapB height="600px" />
                        </template>
                        <template slot="des">
                            <p><span>china.js下载：</span></p>
                            <ul>
                                <li><a :href="`${baseUrl}/static/chart/china.js`" download="china.js">china.js</a></li>
                            </ul>
                        </template>
                    </MdPreview>
                    <MdPreview :val="demo1" :show="false" desName="地图四">
                        <template slot="code">
                            <EchartMapD height="600px" />
                        </template>
                        <template slot="des">
                            <p><span>china.js下载：</span></p>
                            <ul>
                                <li><a :href="`${baseUrl}/static/chart/china.js`" download="china.js">china.js</a></li>
                            </ul>
                        </template>
                    </MdPreview>
                </a-col>
            </a-row>
        </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import EchartMapA from '@/components/echarts/echart_mapA'
import EchartMapB from '@/components/echarts/echart_mapB'
import EchartMapC from '@/components/echarts/echart_mapC'
import EchartMapD from '@/components/echarts/echart_mapD'

export default {
    components: {
        EchartMapA,
        EchartMapB,
        EchartMapC,
        EchartMapD,
    },
    data() {
        return {
            demo1: `
<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import './map/china.js'

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            var chinaGeoCoordMap = {
                '黑龙江': [127.9688, 45.368],
                '内蒙古': [110.3467, 41.4899],
                "吉林": [125.8154, 44.2584],
                '北京': [116.4551, 40.2539],
                "辽宁": [123.1238, 42.1216],
                "河北": [114.4995, 38.1006],
                "天津": [117.4219, 39.4189],
                "山西": [112.3352, 37.9413],
                "陕西": [109.1162, 34.2004],
                "甘肃": [103.5901, 36.3043],
                "宁夏": [106.3586, 38.1775],
                "青海": [101.4038, 36.8207],
                "新疆": [87.9236, 43.5883],
                "西藏": [91.11, 29.97],
                "四川": [103.9526, 30.7617],
                "重庆": [108.384366, 30.439702],
                "山东": [117.1582, 36.8701],
                "河南": [113.4668, 34.6234],
                "江苏": [118.8062, 31.9208],
                "安徽": [117.29, 32.0581],
                "湖北": [114.3896, 30.6628],
                "浙江": [119.5313, 29.8773],
                "福建": [119.4543, 25.9222],
                "江西": [116.0046, 28.6633],
                "湖南": [113.0823, 28.2568],
                "贵州": [106.6992, 26.7682],
                "云南": [102.9199, 25.4663],
                "广东": [113.12244, 23.009505],
                "广西": [108.479, 23.1152],
                "海南": [110.3893, 19.8516],
                '上海': [121.4648, 31.2891]
            };
            var chinaDatas = [
                [{
                    name: '黑龙江',
                    value: 0
                }],
                [{
                    name: '内蒙古',
                    value: 0
                }],
                [{
                    name: '吉林',
                    value: 0
                }],
                [{
                    name: '辽宁',
                    value: 0
                }],
                [{
                    name: '河北',
                    value: 0
                }],
                [{
                    name: '天津',
                    value: 0
                }],
                [{
                    name: '山西',
                    value: 0
                }],
                [{
                    name: '陕西',
                    value: 0
                }],
                [{
                    name: '甘肃',
                    value: 0
                }],
                [{
                    name: '宁夏',
                    value: 0
                }],
                [{
                    name: '青海',
                    value: 0
                }],
                [{
                    name: '新疆',
                    value: 0
                }],
                [{
                    name: '西藏',
                    value: 0
                }],
                [{
                    name: '四川',
                    value: 0
                }],
                [{
                    name: '重庆',
                    value: 0
                }],
                [{
                    name: '山东',
                    value: 0
                }],
                [{
                    name: '河南',
                    value: 0
                }],
                [{
                    name: '江苏',
                    value: 0
                }],
                [{
                    name: '安徽',
                    value: 0
                }],
                [{
                    name: '湖北',
                    value: 0
                }],
                [{
                    name: '浙江',
                    value: 0
                }],
                [{
                    name: '福建',
                    value: 0
                }],
                [{
                    name: '江西',
                    value: 0
                }],
                [{
                    name: '湖南',
                    value: 0
                }],
                [{
                    name: '贵州',
                    value: 0
                }],
                [{
                    name: '广西',
                    value: 0
                }],
                [{
                    name: '海南',
                    value: 0
                }],
                [{
                    name: '上海',
                    value: 0
                }]
            ];

            var convertData = (data) => {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = chinaGeoCoordMap[dataItem[0].name];
                    var toCoord = [113.12244, 23.009505]; //连线聚焦点
                    if (fromCoord && toCoord) {
                        res.push([{
                            coord: fromCoord,
                            value: dataItem[0].value
                        }, {
                            coord: toCoord,
                        }]);
                    }
                }
                return res;
            };
            var series = [];
            [
                ['广东', chinaDatas]
            ].forEach(function(item, i) {
                console.log(item)
                series.push({
                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 5, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                width: 1, //尾迹线条宽度
                                opacity: 1, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        data: convertData(item[1])
                    }, {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: { //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 4 //波纹圆环最大限制，值越大波纹越大
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right', //显示位置
                                offset: [5, 0], //偏移设置
                                formatter: function(params) { //圆环显示文字
                                    return params.data.name;
                                },
                                fontSize: 15,
                                color: '#fff'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        symbol: 'circle',
                        symbolSize: function(val) {
                            return 4 + val[2] * 4; //圆环大小
                        },
                        itemStyle: {
                            normal: {
                                show: false,
                                color: '#f00'
                            }
                        },
                        data: item[1].map(function(dataItem) {
                            return {
                                name: dataItem[0].name,
                                value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                            };
                        }),
                    },
                    //被攻击点
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            period: 4,
                            brushType: 'stroke',
                            scale: 4
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                //offset:[5, 0],
                                color: '#fff',
                                formatter: '{b}',
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 14
                                }
                            },
                            emphasis: {
                                show: true,
                                color: "#f60"
                            }
                        },
                        symbol: 'pin',
                        symbolSize: 30,
                        data: [{
                            name: item[0],
                            value: chinaGeoCoordMap[item[0]].concat([10]),
                        }],
                    }
                );
            });

            let option = {
                backgroundColor: "transparent",
                visualMap: { //图例值控制
                    min: 0,
                    max: 1,
                    calculable: true,
                    show: false,
                    color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'china',
                    zoom: 1.2,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true, //是否允许缩放
                    itemStyle: {
                        normal: {
                            color: 'rgba(10,81,169, 1)', //地图背景色
                            borderColor: '#1180CD', //省市边界线00fcff 516a89
                            borderWidth: 1
                        },
                        emphasis: {
                            color: 'rgba(86,157,223,1)' //悬浮背景
                        }
                    }
                },
                series: series
            };

            this.chart.setOption(option);

            window.addEventListener("resize", () => {
                this.chart.resize();
            });
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
<\/script>
            `,
            demo2: `
<template>
  <div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import './map/china.js'

export default {
    props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
	},
    data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
    mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
    methods:{
        init(){
            this.chart = echarts.init(this.$el);

              var geoCoordMap = {
                台湾: [121.5135, 25.0308],
                黑龙江: [127.9688, 45.368],
                内蒙古: [110.3467, 41.4899],
                吉林: [125.8154, 44.2584],
                北京市: [116.4551, 40.2539],
                辽宁: [123.1238, 42.1216],
                河北: [114.4995, 38.1006],
                天津: [117.4219, 39.4189],
                山西: [112.3352, 37.9413],
                陕西: [109.1162, 34.2004],
                甘肃: [103.5901, 36.3043],
                宁夏: [106.3586, 38.1775],
                青海: [101.4038, 36.8207],
                新疆: [87.9236, 43.5883],
                西藏: [91.11, 29.97],
                四川: [103.9526, 30.7617],
                重庆: [108.384366, 30.439702],
                山东: [117.1582, 36.8701],
                河南: [113.4668, 34.6234],
                江苏: [118.8062, 31.9208],
                安徽: [117.29, 32.0581],
                湖北: [114.3896, 30.6628],
                浙江: [119.5313, 29.8773],
                福建: [119.4543, 25.9222],
                江西: [116.0046, 28.6633],
                湖南: [113.0823, 28.2568],
                贵州: [106.6992, 26.7682],
                云南: [102.9199, 25.4663],
                广东: [113.12244, 23.009505],
                广西: [108.479, 23.1152],
                海南: [110.3893, 19.8516],
                上海: [121.4648, 31.2891],
            };

              var data = [
                { name: "北京", value: 199 },
                { name: "天津", value: 42 },
                { name: "河北", value: 102 },
                { name: "山西", value: 81 },
                { name: "内蒙古", value: 47 },
                { name: "辽宁", value: 67 },
                { name: "吉林", value: 82 },
                { name: "黑龙江", value: 123 },
                { name: "上海", value: 24 },
                { name: "江苏", value: 92 },
                { name: "浙江", value: 114 },
                { name: "安徽", value: 109 },
                { name: "福建", value: 116 },
                { name: "江西", value: 91 },
                { name: "山东", value: 119 },
                { name: "河南", value: 137 },
                { name: "湖北", value: 116 },
                { name: "湖南", value: 114 },
                { name: "重庆", value: 91 },
                { name: "四川", value: 125 },
                { name: "贵州", value: 62 },
                { name: "云南", value: 83 },
                { name: "西藏", value: 9 },
                { name: "陕西", value: 80 },
                { name: "甘肃", value: 56 },
                { name: "青海", value: 10 },
                { name: "宁夏", value: 18 },
                { name: "新疆", value: 180 },
                { name: "广东", value: 123 },
                { name: "广西", value: 59 },
                { name: "海南", value: 14 },
            ];

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    });
                }
                }
                return res;
            };

            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        if (typeof params.value[2] == "undefined") {
                        return params.name + " : " + params.value;
                        } else {
                        return params.name + " : " + params.value[2];
                        }
                    },
                },
                legend: {
                    orient: "vertical",
                    y: "bottom",
                    x: "right",
                    data: ["pm2.5"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: "left",
                    top: "bottom",
                    text: ["高", "低"], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {},
                },
                geo: {
                    map: "china",
                    show: true,
                    roam: true,
                    zoom: 1.2,
                    label: {
                        normal: {
                        show: false,
                        },
                        emphasis: {
                        show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                        areaColor: "#3a7fd5",
                        borderColor: "#0a53e9", //线
                        shadowColor: "#092f8f", //外发光
                        shadowBlur: 20,
                        },
                        emphasis: {
                        areaColor: "#0a2dae", //悬浮区背景
                        },
                    },
                },
                series: [
                    {
                        symbolSize: 5,
                        label: {
                        normal: {
                            formatter: "{b}",
                            position: "right",
                            show: true,
                        },
                        emphasis: {
                            show: true,
                        },
                        },
                        itemStyle: {
                        normal: {
                            color: "#fff",
                        },
                        },
                        name: "light",
                        type: "scatter",
                        coordinateSystem: "geo",
                        data: convertData(data),
                    },
                    {
                        type: "map",
                        map: "china",
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                            color: "#fff",
                            },
                        },
                        },
                        roam: true,
                        itemStyle: {
                        normal: {
                            areaColor: "#031525",
                            borderColor: "#FFFFFF",
                        },
                        emphasis: {
                            areaColor: "#2B91B7",
                        },
                        },
                        animation: false,
                        data: data,
                    },
                    {
                        name: "Top 5",
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: "pin",
                        symbolSize: [50, 50],
                        label: {
                        normal: {
                            show: true,
                            textStyle: {
                            color: "#fff",
                            fontSize: 9,
                            },
                            formatter(value) {
                            return value.data.value[2];
                            },
                        },
                        },
                        itemStyle: {
                        normal: {
                            color: "#D8BC37", //标志颜色
                        },
                        },
                        data: convertData(data),
                        showEffectOn: "render",
                        rippleEffect: {
                        brushType: "stroke",
                        },
                        hoverAnimation: true,
                        zlevel: 1,
                    },
                ],

            }

            this.chart.setOption(option);

            window.addEventListener("resize", () => {
                this.chart.resize();
            });
        }
    }
}
<\/script>
            `,
            demo3: `
<template>
  <div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import './map/china.js'

export default {
    props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
	},
    data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
    mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
    methods:{
        init(){
            this.chart = echarts.init(this.$el);

            var outname = [
            "南海诸岛",
            "北京",
            "天津",
            "上海",
            "重庆",
            "河北",
            "河南",
            "云南",
            "辽宁",
            "黑龙江",
            "湖南",
            "安徽",
            "山东",
            "新疆",
            "江苏",
            "浙江",
            "江西",
            "湖北",
            "广西",
            "甘肃",
            "山西",
            "内蒙古",
            "陕西",
            "吉林",
            "福建",
            "贵州",
            "广东",
            "青海",
            "西藏",
            "四川",
            "宁夏",
            "海南",
            "台湾",
            "香港",
            "澳门",
            ];
            var outvalue = [
            0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052,
            33, 347, 9, 157, 22, 4, 18, 5, 6398, 41, 0, 484, 404, 22, 3, 5, 225,
            ];
            var outdata = [];
            for (var i = 0; i < outname.length; i++) {
            outdata.push({
                name: outname[i],
                value: outvalue[i],
            });
            }
            
            let option = {

                tooltip: {
                    show: true,
                    formatter: function (params) {
                    return (
                        "&nbsp;&nbsp;" +
                        params.name +
                        "&nbsp;&nbsp;&nbsp;" +
                        params.value +
                        "人&nbsp;&nbsp;"
                    );
                    },
                },
                visualMap: {
                    type: "piecewise",
                    left: "15",
                    bottom: "15",
                    itemWidth: 27,
                    itemHeight: 15,
                    textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    },
                    pieces: [
                    {
                        min: 500,
                        label: ">500",
                    },
                    {
                        max: 500,
                        min: 200,
                        label: "200-500",
                    },
                    {
                        max: 200,
                        min: 0,
                        label: "<200",
                    },
                    {
                        value: 0,
                        label: "无数据",
                    },
                    ],
                    inRange: {
                    color: ["#B2CAE0", "#D2EAFF", "#8AC6FD", "#45A5F8"],
                    },
                    outOfRange: {
                    color: ["#999999"],
                    },
                },
                geo: {
                    map: "china",
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                    emphasis: {
                        show: false,
                    },
                    },
                    itemStyle: {
                    normal: {
                        borderColor: "rgba(0,63,140,0.2)",
                        shadowColor: "rgba(0,63,140,0.2)",
                        shadowOffsetY: 20,
                        shadowBlur: 30,
                    },
                    },
                },
                series: [
                    {
                    type: "map",
                    map: "china",
                    aspectScale: 0.75,
                    zoom: 1.2,
                    label: {
                        normal: {
                        show: false,
                        },
                        emphasis: {
                        show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                        areaColor: "#B2CAE0",
                        borderColor: "#fff",
                        borderWidth: 1,
                        },
                        emphasis: {
                        areaColor: "#FFAE00",
                        },
                    },
                    data: outdata,
                    },
                ],

            }

            this.chart.setOption(option);

            window.addEventListener("resize", () => {
                this.chart.resize();
            });
        }
    }
}
<\/script>
            `,
            demo4: `
<template>
  <div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import './map/china.js'

export default {
    props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
	},
    data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
    mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
    methods:{
        init(){
            this.chart = echarts.init(this.$el);
            
            var outname = [
            "南海诸岛",
            "北京",
            "天津",
            "上海",
            "重庆",
            "河北",
            "河南",
            "云南",
            "辽宁",
            "黑龙江",
            "湖南",
            "安徽",
            "山东",
            "新疆",
            "江苏",
            "浙江",
            "江西",
            "湖北",
            "广西",
            "甘肃",
            "山西",
            "内蒙古",
            "陕西",
            "吉林",
            "福建",
            "贵州",
            "广东",
            "青海",
            "西藏",
            "四川",
            "宁夏",
            "海南",
            "台湾",
            "香港",
            "澳门",
            ];
            var outvalue = [
            0, 524, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052,
            33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5, 225,
            ];
            var outdata = [];

            var max = 6000,
            min = 10;
            var maxSize4Pin = 100,
            minSize4Pin = 20;

            for (var i = 0; i < outname.length; i++) {
            outdata.push({
                name: outname[i],
                value: outvalue[i],
            });
            }

            var geoCoordMap = {};
            /*获取地图数据*/
            var mapFeatures = echarts.getMap("china").geoJson.features;
            //  console.log(mapFeatures)
            mapFeatures.forEach(function (v) {
            console.info(v);
            // 地区名称
            var name = v.properties.name;
            // 地区经纬度
            geoCoordMap[name] = v.properties.cp;
            });
            var convertData = function (outdata) {
            var res = [];
            for (var i = 0; i < outdata.length; i++) {
                var geoCoord = geoCoordMap[outdata[i].name];
                if (geoCoord) {
                res.push({
                    name: outdata[i].name,
                    value: geoCoord.concat(outdata[i].value),
                });
                }
            }
            return res;
            };


            let option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                    if (params.value.length > 1) {
                        return (
                        "&nbsp;&nbsp;" +
                        params.name +
                        "&nbsp;&nbsp;&nbsp;" +
                        params.value[2] +
                        "人&nbsp;&nbsp;"
                        );
                    } else {
                        return (
                        "&nbsp;&nbsp;" +
                        params.name +
                        "&nbsp;&nbsp;&nbsp;" +
                        params.value +
                        "人&nbsp;&nbsp;"
                        );
                    }
                    },
                },

                geo: {
                    map: "china",
                    show: true,
                    roam: false,
                    zoom: 1.2,
                    label: {
                    emphasis: {
                        show: false,
                    },
                    },
                    layoutSize: "100%",
                    itemStyle: {
                    normal: {
                        borderColor: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                            offset: 0,
                            color: "#00F6FF",
                            },
                            {
                            offset: 1,
                            color: "#53D9FF",
                            },
                        ],
                        false
                        ),
                        borderWidth: 3,
                        shadowColor: "rgba(10,76,139,1)",
                        shadowOffsetY: 0,
                        shadowBlur: 60,
                    },
                    },
                },
                series: [
                    {
                    type: "map",
                    map: "china",
                    aspectScale: 0.75,
                    zoom: 1.2,
                    label: {
                        normal: {
                        show: false,
                        },
                        emphasis: {
                        show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                        areaColor: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                            {
                                offset: 0,
                                color: "#073684", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#061E3D", // 100% 处的颜色
                            },
                            ],
                        },
                        borderColor: "#215495",
                        borderWidth: 1,
                        },
                        emphasis: {
                        areaColor: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                            {
                                offset: 0,
                                color: "#073684", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#061E3D", // 100% 处的颜色
                            },
                            ],
                        },
                        },
                    },
                    data: outdata,
                    },
                    {
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    rippleEffect: {
                        brushType: "stroke",
                    },
                    showEffectOn: "render",
                    itemStyle: {
                        normal: {
                        color: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [
                            {
                                offset: 0,
                                color: "rgba(5,80,151,0.2)",
                            },
                            {
                                offset: 0.8,
                                color: "rgba(5,80,151,0.8)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0,108,255,0.7)",
                            },
                            ],
                            global: false, // 缺省为 false
                        },
                        },
                    },
                    label: {
                        normal: {
                        show: true,
                        color: "#fff",
                        fontWeight: "bold",
                        position: "inside",
                        formatter: function (para) {
                            return "{cnNum|" + para.data.value[2] + "}";
                        },
                        rich: {
                            cnNum: {
                            fontSize: 13,
                            color: "#D4EEFF",
                            },
                        },
                        },
                    },
                    symbol: "circle",
                    symbolSize: function (val) {
                        if (val[2] === 0) {
                        return 0;
                        }
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = maxSize4Pin - a * max;
                        return a * val[2] + b * 1.2;
                    },
                    data: convertData(outdata),
                    zlevel: 1,
                    },
                ],
            }

            this.chart.setOption(option);

            window.addEventListener("resize", () => {
                this.chart.resize();
            });
        }
    }
}
<\/script>
            `
        }
    }
}
</script>

<style>

</style>